<script setup>
import {defineEmits, reactive, ref} from "vue"
import { md5Encryption } from '@/utils/encryption.js'
import {showToast} from "vant"

const emit = defineEmits(['emitPasswordLogin'])

const loginFrom = reactive({
  username: '',
  password: ''
})

const updateInput = () => {
  emit('emitPasswordLogin', loginFrom)
}
</script>

<template>
  <!-- 可以使用 CellGroup 作为容器 -->
  <div class="box">
    <van-cell-group class="input_item" inset>
      <van-field v-model="loginFrom.username" @update:model-value="updateInput" placeholder="请输入手机号" />
    </van-cell-group>
    <van-cell-group class="input_item" inset>
      <van-field v-model="loginFrom.password" @update:model-value="updateInput" placeholder="请输入密码" >
        <template #button>
          <div class="text" @click="getCode">忘记密码</div>
        </template>
      </van-field>
    </van-cell-group>
  </div>

</template>

<style scoped lang="scss">
:deep(.van-cell-group--inset) {
  margin: 0;
  height: 5rem;
}
:deep(.van-cell) {
  padding: 0 1rem;
  line-height: 5rem;
  font-size: 1.6rem;
}
.box{
  margin: 4rem 3rem 0 3rem;
  .input_item{
    margin-bottom: 2rem;
    .text{
      font-size: 1.6rem;
      color: var(--van-primary-color);
    }
  }
}
</style>